<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set value="${pageContext.request.contextPath}" var = "ctx"/>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>MMLOO</title>
  <link rel="stylesheet" href="../../../../resources/plugins/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../../../../resources/css/global.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/webuploader.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/plugins/image_css/global.css">
  <script src="../../../../resources/plugins/jquery-2.0.3.min.js"></script>
  <script src="../../../../resources/plugins/bootstrap/js/bootstrap.js"></script>
  <script src="../../../../resources/js/jquery.masonry.min.js"></script>
  <script src="../../../../resources/js/global.js"></script>
  <script src="${pageContext.request.contextPath}/resources/js/webuploader/webuploader.min.js"></script>
  <script src="${pageContext.request.contextPath}/resources/plugins/image_global/global.js"></script>

  <!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
<jsp:include page="../../home/navigator.jsp"></jsp:include>

      <%-----------------------------------------------------------------------------%>
       <%-- <div class="container" style="width:1200px;height:600px;color:#66afe9">

          <div class="main-content" >
            &lt;%&ndash;<section class="main-panel">
              <div class="row">
                <div style="margin:1em 0;width: 100%;text-align: center;font-size: 4em">

                </div>
              </div>
            </section>&ndash;%&gt;
            &lt;%&ndash;<script type="text/javascript">


              function generateNumber(path) {
                $.ajax({
                  url : path,
                  type : 'get',
                  async : true,
                  dataType: "json",
                  success: function(data) {
                    alert(data.success);
                    if (data.success) {
                      $('#number').empty();   //清空resText里面的所有内容
                      $('#number').val(data.data);
                    }

                  }
                });
              }
              function findCategory(path) {
                $.ajax({
                  url : path,
                  type : 'post',
                  async : true,
                  dataType: "json",
                  success: function(data) {
                    $("#category select").empty();
                    $.each(data, function (idx, obj) {
                      var app = '<option value="'+ obj.id +'">'+ obj.category + '\</option>';
//                      var inp = '<input class="edit_check" type="checkbox" name="permission" value="' + obj.id + '"/>' + '&nbsp;&nbsp;' + obj.per_description;
                      $("#category select").append(app);
                    });



                  }
                });
              }

              function findOrigin(path) {
                alert(path);
                $.ajax({
                  url : path,
                  type : 'get',
                  async : true,
                  dataType: "json",
                  success: function(data) {
                    alert(data.success);
                    if (data.success) {

                    }

                  }
                });
              }
              function findCity(path) {
                alert(path);
                $.ajax({
                  url : path,
                  type : 'get',
                  async : true,
                  dataType: "json",
                  success: function(data) {
                    alert(data.success);
                    if (data.success) {

                    }

                  }
                });
              }
              function findOrigin(path) {
                alert(path);
                $.ajax({
                  url : path,
                  type : 'get',
                  async : true,
                  dataType: "json",
                  success: function(data) {
                    alert(data.success);
                    if (data.success) {

                    }

                  }
                });
              }
              function findBrand(path) {
                alert(path);
                $.ajax({
                  url : path,
                  type : 'get',
                  async : true,
                  dataType: "json",
                  success: function(data) {
                    alert(data.success);
                    if (data.success) {

                    }

                  }
                });
              }
            </script>&ndash;%&gt;
            <div>
              <form name="goods" class="form-horizontal"  action="#" method="post"  enctype="multipart/form-data">
                <div align="left" style="width: 600px; margin-right: auto; margin-left: auto;">
                  <div class="form-group">
                    <label for="number" class="col-sm-2 control-label"><span style="color:red;">*</span>商品编号</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="number" name="number" readonly>
                    &lt;%&ndash;<button onclick="generateNumber('${pageContext.request.contextPath}/manage/goods/generateNumber')"
                            class="btn btn-primary btn-xs">生成
                    </button>&ndash;%&gt;
                    </div>
                  </div>
                  <div class="form-group">
                    <label  class="col-sm-2 control-label"><span style="color:red;">*</span>商品名称</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" name="name" required>
                    </div>
                  </div>
                  <div class="form-group">
                    <label  class="col-sm-2 control-label"><span style="color:red;">*</span>商品详情</label>
                    <div class="col-sm-10">
                      <textarea  class="form-control " name="description" required></textarea>
                    </div>
                  </div>
                  <div class="form-group">
                    <label  class="col-sm-2 control-label"><span style="color:red;">*</span>简介</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" name="brief" required>
                    </div>
                  </div>
                  <div class="form-group">
                    <label  class="col-sm-2 control-label"><span style="color:red;">*</span>类别</label>
                    <div id="category" class="col-sm-10">
                      <select name="category_id" &lt;%&ndash;onclick="findCategory('${pageContext.request.contextPath}/manage/goods/findCategory')" &ndash;%&gt;>
                      </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <label  class="col-sm-2 control-label"><span style="color:red;">*</span>属性</label>
                    <div id="attribute" class="col-sm-10">
                      <select name="attribute_id">
                        <option></option>
                      </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <label  class="col-sm-2 control-label"><span style="color:red;">*</span>属性选项</label>
                    <div class="col-sm-10">
                      &lt;%&ndash;<select name="category_id" onclick="findAttrOpt('${pageContext.request.contextPath}/manage/goods/findCategory')" >
                        <option></option>
                      </select>&ndash;%&gt;
                    </div>
                  </div>
                  <div class="form-group">
                    <label  class="col-sm-2 control-label"><span style="color:red;">*</span>产地</label>
                    <div id="origin" class="col-sm-10">
                      <select name="origin_id">
                        <option></option>
                      </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <label  class="col-sm-2 control-label"><span style="color:red;">*</span>城市</label>
                    <div id="city" class="col-sm-10">
                      <select name="city_id">
                        <option></option>
                      </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <label  class="col-sm-2 control-label"><span style="color:red;">*</span>品牌</label>
                    <div id="brand" class="col-sm-10">
                      <select name="brand_id">
                        <option></option>
                      </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <label  class="col-sm-2 control-label"><span style="color:red;">*</span>原价</label>
                    <div class="col-sm-10">
                      <input type="number" class="form-control" name="price" required>
                    </div>
                  </div>

                  <div class="form-group">
                    <label  class="col-sm-2 control-label"><span style="color:red;">*</span>销售类型</label>
                    <div class="col-sm-10">
                      <label><input type="checkbox" name="sale_type" value="1">最新</label>
                      <label><input type="checkbox" name="sale_type" value="2">特卖</label>
                      <label><input type="checkbox" name="sale_type" value="3">热卖</label>
                      <label><input type="checkbox" name="sale_type" value="4">推荐</label>
                    </div>
                  </div>
                  &lt;%&ndash;<div class="form-group">&ndash;%&gt;


                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <input type="submit" value="提交" class="btn btn-primary" /> <input type="reset" value="重置"
                                                                                        class="btn btn-default" />
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      &lt;%&ndash;-------------------------------------------------------------------------&ndash;%&gt;
    <div>
      &lt;%&ndash;------------------------------------------------------------------&ndash;%&gt;
         <form id="imageForm">
                     <label  class="col-sm-2 control-label"><span style="color:red;">*</span>上传商品图片</label>
                     <div class="col-sm-10">
                       <input id="uploadImage" type="file" name="uploadFiles" required="true" multiple="multiple" >
                       <div id="imgDiv"></div>
                     </div>
                       <input type="submit" value="保存" id="save-img">
                       <input type="button" value="取消" id="cancel-img">
                       </form>
        </div>
        <script type="application/javascript">
          $("#save-img").click(function(){
            // 异步上传表单（成功上传图片后才能提交房源信息）
            $.ajax({

              type:'POST',
              async:false,
              url:"/images/upload",
              success: function(result){
                var dataJson = JSON.parse(JSON.stringify(result));
                var image_url=dataJson.data;

                var url="";
                if(image_url!=undefined)
                  for(var i=0;i<image_url.length;i++){
                    url+=image_url[i];
                    if(i!=image_url.length-1)
                      url+='-';
                  }
                console.log(url);
                var img=$("#imgDiv");
                img.empty();
                img.append("<span>商品图片：</span>");
                var imgArr=url.split("-");
                for(var j=0;j<imgArr.length;j++)
                  img.append("<img src="+imgArr[j]+" alt='' style= 'width: 100px;height: 100px;margin-left:10px'>");

              }

          });
          });
        </script>
      &lt;%&ndash;------------------------------------------------------------------&ndash;%&gt;
    </div>
  </div>
</div>


<script>
  $(document).ready(function () {
    evokeMasonryLayout();
    $.ajax({
      url: '/manage/goods/init',
      type: 'get',
      async: true,
      dataType: "json",
      success: function (data) {
        alert(data.categories);

        $("#number").val(data.number);

        $("#category select").empty();
        var app = '\<option>'+ "新添加" + '\</option>';
        $("#category select").append(app);
        $.each(data.categories, function (idx, obj) {
           app = '<option value="'+ obj.id +'">'+ obj.category + '\</option>';
//                      var inp = '<input class="edit_check" type="checkbox" name="permission" value="' + obj.id + '"/>' + '&nbsp;&nbsp;' + obj.per_description;
          $("#category select").append(app);
        });



        $("#origin select").empty();
        var app = '\<option>'+ "新添加" + '\</option>';
        $("#origin select").append(app);
        $.each(data.origins, function (idx, obj) {
          app = '<option value="'+ obj.id +'">'+ obj.origin + '\</option>';
          $("#origin select").append(app);
        });

        $("#city select").empty();
        var app = '\<option>'+ "新添加" + '\</option>';
        $("#city select").append(app);
        $.each(data.cities, function (idx, obj) {
          app = '<option value="'+ obj.id +'">'+ obj.city + '\</option>';
          $("#city select").append(app);
        });

        $("#attribute select").empty();
        var app = '\<option>'+ "新添加" + '\</option>';
        $("#attribute select").append(app);
        $.each(data.attributes, function (idx, obj) {
          app = '<option value="'+ obj.id +'">'+ obj.attribute + '\</option>';
          $("#attribute select").append(app);
        });

        $("#brand select").empty();
        var app = '\<option>'+ "新添加" + '\</option>';
        $("#brand select").append(app);
        $.each(data.brands, function (idx, obj) {
          app = '<option value="'+ obj.id +'">'+ obj.brand + '\</option>';
          $("#brand select").append(app);
        });

      }
    });
  });
</script>--%>

<div class="container" style="width:1200px;height:600px;color:#66afe9">

<div class="main-content" >
  <form  class="form-horizontal"  action="${pageContext.request.contextPath}/manage/goods/addPic" method="post">
    <div align="left" style="width: 600px; margin-right: auto; margin-left: auto;">
      <div class="form-group">
        <div id="normal-img-uploader"<%-- class="far-away"--%>>
          <label>上传商品图片<span class="required">*</span></label>

          <div id="js-upload-btn-normal">上传图片(仅限.JPG格式，1MB以内)</div>
          <div class="progress hidden">
            <div class="progress-bar progress-bar-primary progress-bar-striped active">
              <span>上传中</span>
            </div>
          </div>
          <div class="image-preview-wrapper hidden">
            <img src=""
                 alt=" 图片暂时无法显示"/>
          </div>
        </div>
        <input type="hidden" name="id" value="${id}" />
        <input type="hidden" name="image_urls" />
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <input type="submit" value="提交" class="btn btn-primary" id="save-img" />
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
</div>
<script type="application/javascript">

  $(document).ready(function () {

    alert("1----"+$("input[name=id]").val());
    /**
     *  上传图片（使用两个上传器[缩略图和非缩略图]）
     */
    var uploaderWrapperNormal = $("#normal-img-uploader");

    var uploaderNormal = webUploaderImage(
            "#js-upload-btn-normal",
            1 * 1024 * 1024,
            "${pageContext.request.contextPath}/manage/goods/upload",
            "${pageContext.request.contextPath}/images/delete",
            uploaderWrapperNormal.find(".progress"),
            uploaderWrapperNormal.find(".image-preview-wrapper"),
            '${pageContext.request.contextPath}/upload/image/',
            "input[name='image_urls']"
    );

    function handle(evt) {
      if (chosen) {
        if (confirm("修改此选项需要重新上传图片，确定修改？")) {
          $("input[name='image_urls']").val("");
          $(".image-preview-wrapper").addClass("hidden");
        } else {
          evt.stopPropagation();
          evt.preventDefault();
          return;
        }
      }
      chosen = true;
    }


    var submitFlag = false;

    /**
     * 退出页面提示
     */
    window.onbeforeunload = function () {
      if (!submitFlag) {
        return "您确定要退出页面吗？";
      }
    }

    /**
     * 退出页面时删除图片
     */
    window.onunload = function () {
      if (!submitFlag) {
        uploaderNormal.deleteOldFile();
      }
    }

    /**
     * 表单提交前验证
     */
    $("form.form-horizontal").submit(function () {
      if ($("input[name='image_urls']").val() == "") {
        alert("还没上传图片哟！");
        return false;
      } else {
        submitFlag = true;
      }
    });
  });
</script>
</body>
</html>
